<template>
  <div>
    <div class="content">
      <main-page v-if="defaultActive === '1'"></main-page>
      <classify-page v-else-if="defaultActive === '2'"></classify-page>
      <shopping-cart-page v-else-if="defaultActive === '3'"></shopping-cart-page>
      <personal-page v-else-if="defaultActive === '4'"></personal-page>
    </div>
    <bottom-nav :data="navData" :defaultActive="defaultActive" @change="change"></bottom-nav>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import BottomNav from '@/components/project/nav/bottomNav.vue';
import PersonalPage from './personal.vue';
import ShoppingCartPage from './shoppingCart.vue';
import MainPage from './main.vue';
import ClassifyPage from './classify.vue';
import { BottomNavData } from '@/modules/index';
@Component({
    components: {
      PersonalPage,
      ShoppingCartPage,
      MainPage,
      ClassifyPage,
      BottomNav,
    },
})
export default class Home extends Vue {
  // 定义当前导航栏的数据
  private navData: BottomNavData[] = [
    {
      id: '1',
      name: '首页',
      icon: '',
    },
    {
      id: '2',
      name: '分类',
      icon: '',
    },
    {
      id: '3',
      name: '购物车',
      icon: '',
    },
    {
      id: '4',
      name: '个人中心',
      icon: '',
    },
  ];
  // 定义当前选中的导航栏
  private defaultActive: string = this.navData[0].id;
  /**
   * 当前选中的标签
   */
  private change(id: string) {
    this.defaultActive = id;
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: calc(100% - 98px);
  overflow-y: auto;
  background-color: #f5f5f5;
}
</style>
